<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>留言板-demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}">
    <script th:src="@{/js/jquery-3.4.1.min.js}"></script>
    <script th:src="@{/js/popper.min.js}"></script>
    <script th:src="@{/js/bootstrap.js}"></script>
    <script th:src="@{/js/bootstrap.bundle.min.js}"></script>
    <script th:src="@{/js/jquery.twbsPagination.js}"></script>
    <style type="text/css">
        body{
            background-color: #f5f5f5;
            padding-top: 80px;
        }
        html {
            overflow-y: scroll;
        }
        :root {
            overflow-y: auto;
            overflow-x: hidden;
        }
        :root body {
            position: absolute;
        }
        body {
            width: 100vw;
            overflow: hidden;
        }
    </style>
</head>
<body>

<div th:include="layout/header :: header(user=${session.user},flag=${session.user}!=null,page='message_list')"></div>

<main role="main" class="container">

    <div class="card bg-white rounded shadow p-3 mb-3">
        <form role="form" id="sendMessage" th:action="@{sendMessage}" method="post">
            <div class="form-group">
                <input type="text" name="userID" class="form-control" id="userID" required hidden th:value="${session.user.userID}">
<!--                <input type="text" class="form-control" id="userID" name="userID" hidden  required te th:value="${session.user.userID}"></input>-->
            </div>
            <div class="form-group">
                <label for="content" class="font-weight-bold sr-only">发布留言</label>
                <textarea class="form-control" id="content" name="content" rows="3" placeholder="有什么想和大家分享的？" required></textarea>
                <p class="text-muted my-0" id="word">500</p>
            </div>
            <button class="btn btn-danger btn-block col-2 ml-auto" type="submit">发布</button>
        </form>
    </div>


    <div class="card bg-white rounded shadow">
        <div class="card-header">
            <ul class="nav nav-tabs card-header-tabs">
                <li class="nav-item">
                    <a class="nav-link active" href="#tab1" data-toggle="tab">全部留言</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#tab2" data-toggle="tab">我的留言</a>
                </li>
            </ul>
        </div>
        <div class="card-body">
            <div class="tab-content">
                <div class="tab-pane fade show active" id="tab1">
                    <ul class="list-group" id="content1">
                    </ul>
                    <div class="d-flex justify-content-center mt-2" id="pagination1"></div>

                </div>

                <div class="tab-pane fade" id="tab2">
                    <ul class="list-group" id="content2">
                    </ul>
                    <div class="d-flex justify-content-center mt-2" id="pagination2"></div>
                </div>
            </div>
        </div>

    </div>

</main>
<div th:include="layout/footer :: Footer"></div>

<script type="text/javascript">
    // $(document).ready(function () {
    //     getPage1(1);
    //     getPage2(1);
    // });

    $("#content").keyup(function(){
        let len = $(this).val().length;
        if(len > 499){
            $(this).val($(this).val().substring(0,500));
            $("#word").text(0);
        }
        if(len <= 0){
            $("#word").text("0/500");
        }else if(len >= 500){
            $("#word").text('500/500');
        }else{
            $("#word").text(len+'/500');
        }
    });
    function wordsLimit(i){
        let len = $("#myMessage"+i).val().length;
        if(len > 499){
            $("#myMessage"+i).val($("#myMessage"+i).val().substring(0,500));
            $("#word2").text(0);
        }
        if(len <= 0){
            $("#word"+i).text("0/500");
        }else if(len >= 500){
            $("#word"+i).text('500/500');
        }else{
            $("#word"+i).text(len+'/500');
        }
    }


    $("#sendMessage").submit(function () {
        alert("发布成功，等待审核！");
    });


    $('#pagination1').twbsPagination({
        totalPages: [[${total}]],
        visiblePages: 5,
        onPageClick: function (event, page) {
            getPage1(page);
        }
    });

    function getPage1(page){
        $.ajax({//根据page去后台加载数据
            url : "/message/getMessageList",
            type : "get",
            dataType : "json",
            data : {"page" : page},
            success : function(data) {
                appendHtml1(data);//处理数据
                console.log(data);
            }
        });
    }
    function appendHtml1(list) {//此函数用于处理后台返回的数据，根据自己需求来实现页面拼接
        let tableShow = '';
        for (let i = 0; i < list.length; i++) {
            tableShow += '<li class="list-group-item px-3 border-0">\n' +
                '                            <div class="media border-bottom border-gray">\n';
            if(list[i].picture == '')
                tableShow += '<img class="mr-2" src="default.jpg" alt="" height="32px" width="32px">\n';
            else
                tableShow += '<img class="mr-2" src="'+list[i].picture+'" alt="" height="32px" width="32px">\n';
            tableShow += '<div class="media-body pb-3 mb-0">\n' +
                '                                    <strong class="d-block">@'+list[i].userName+'</strong>\n' +
                '                                    <p>'+list[i].content+'</p>\n' +
                '                                    <small class="float-right">'+list[i].time+'</small>\n' +
                '                                </div>\n' +
                '                            </div>\n' +
                '                        </li>\n';
        }
        $('#content1').html(tableShow);
    }

    $('#pagination2').twbsPagination({
        totalPages: [[${user_total}]],
        visiblePages: 5,
        onPageClick: function (event, page) {
            getPage2(page);
        }
    });

    function getPage2(page){
        $.ajax({//根据page去后台加载数据
            url : "message/findUserList",
            type : "get",
            dataType : "json",
            data : {"page" : page},
            success : function(data) {
                appendHtml2(data);//处理数据
                console.log(data);
            }
        });
    }
    function appendHtml2(list) {//此函数用于处理后台返回的数据，根据自己需求来实现页面拼接
        let tableShow = '';
        for (let i = 0; i < list.length; i++) {
            let ifPass = list[i].state;
            console.log(list[i].state);
            tableShow += '<li class="list-group-item px-3 border-0">\n' +
                '                        <div class="d-flex mb-1">\n';
            if(list[i].state == 3){
                tableShow +='<div class="mr-auto">\n' +
                    '                                <small class="text-danger"><span class="glyphicon glyphicon-info-sign"></span>未通过</small>\n' +
                    '                            </div>\n';
            }
            else if(list[i].state == 1){
                tableShow += '<div class="mr-auto">\n' +
                    '                                <small class="text-warning"><span class="glyphicon glyphicon-info-sign"></span>审核中</small>\n' +
                    '                            </div>\n';
            }
            tableShow += '                            <div class="dropdown ml-auto">\n' +
                '                                <a class="text-dark" href="#" data-toggle="dropdown">\n' +
                '                                    <span class="glyphicon glyphicon-menu-down"></span>\n' +
                '                                </a>\n' +
                '                                <div class="dropdown-menu">\n' +
                '                                    <a class="dropdown-item" data-toggle="collapse" href="#modifyMessage'+i+'">修改</a>\n' +
                '                                    <a class="dropdown-item" href="#"  onclick="del('+list[i].messageID+',this)">删除</a>\n' +
                '                                </div>\n' +
                '                            </div>\n' +
                '                        </div>\n' +
                '                            <div class="media border-bottom border-gray">\n';
            if(list[i].picture == '')
                tableShow += '<img class="mr-2" src="default.jpg" alt="" height="32px" width="32px">\n';
            else
                tableShow += '<img class="mr-2" src="'+list[i].picture+'" alt="" height="32px" width="32px">\n';
            tableShow += '<div class="media-body pb-3 mb-0">\n' +
                '                                    <strong class="d-block">@'+list[i].userName+'</strong>\n' +
                '                                    <p>'+list[i].content+'</p>\n' +
                '                                    <small class="float-right">'+list[i].time+'</small>\n' +
                '                                </div>\n' +
                '                            </div>\n' +
                '                            <div class="collapse" id="modifyMessage'+i+'">\n' +
                '                                <form role="form" >\n' +
                '                                    <div class="form-group">\n' +
                '                                        <label for="myMessage'+i+'" class="font-weight-bold sr-only"></label>\n' +
                '                                        <input type="text" name="messageID" class="form-control" id="messageID'+i+'" required hidden th:value="'+list[i].messageID+'">' +
                '                                    </div>\n' +
                '                                    <div class="form-group">\n' +
                '                                        <label for="myMessage'+i+'" class="font-weight-bold sr-only">发布留言</label>\n' +
                '                                        <textarea class="form-control" name="content" id="myMessage'+i+'" rows="3" required onkeyup="wordsLimit('+i+')">'+list[i].content+'</textarea>\n' +
                '                                        <p class="text-muted my-0" id="word'+i+'">500</p>' +
                '                                    </div>\n' +
                '                                    <div class="col-3 ml-auto d-flex justify-content-end">\n' +
                '                                        <a class="btn btn-primary mr-2 text-light" data-toggle="collapse"  type="submit" onclick="modify('+list[i].messageID+','+i+',this)">\n' +
                '                                            完成\n' +
                '                                        </a>\n' +
                '                                        <a class="btn btn-secondary  " data-toggle="collapse" href="#modifyMessage'+i+'">\n' +
                '                                            取消\n' +
                '                                        </a>\n' +
                '                                    </div>\n' +
                '\n' +
                '                                </form>\n' +
                '\n' +
                '                            </div>\n' +
                '\n' +
                '                        </li>\n';
        }
        $('#content2').html(tableShow);
    }
    function del(messageID,btn) {
        if (!confirm("确定删除该留言？")) {
            return;
        }

        $.ajax({
            cache: true,
            type: "POST",
            url: "/delMessage.do",
            dataType: "Json",
            data: {
                messageID:messageID
            },
            async: false,
            success: function (result) {
                if (result) {
                    $(btn).parent().parent().parent().parent().fadeOut();
                    alert("删除成功！");
                }
            }
        });
    }
    function modify(messageID,i,btn) {
        if($("#myMessage"+i).val().length <=0){
            alert("留言不能为空！");
            return;
        }
        if (!confirm("确定修改该留言？")) {
            return;
        }

        var s="#myMessage"+i;
        var content=$(s).val();
        $.ajax({
            cache: true,
            type: "POST",
            url: "/modifyMessage.do",
            dataType: "Json",
            data: {
                messageID:messageID,
                content:content
            },
            success: function (result) {
                if (result) {
                    alert("修改成功！");
                    window.location.reload();
                }
            }
        });
    }
</script>

</body>
</html>